<!DOCTYPE html>
<html xmlns="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<base th:href="@{/}" />
<title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/Managerstyle.css}"/>
<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}" />
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<style>
	#search{
		float:left;
		height:33px;
		width:33px;
		font-size: 17px;
		line-height:30px;
		text-align:center;
		cursor: pointer;
		border: 1px solid #4cae4c;
		margin-left: 10px;
		margin-top: 1px;
		border-radius: 4px;
		color: white;
		background-color: #5cb85c;
	}
	#search:hover {
		border: 1px solid #398439;
		background-color: #449d44;
	}
</style>
</head>
<body>
	<div class="contain">
		<h3>学生管理</h3>
		<form style="float: left; width: 300px;" th:action="@{/mc/getAllStudent}">
			<input type="text" name=keyword id="keyword" class="form-control" style="float:left; margin-bottom: 5px; width: 200px;" placeholder="请输入关键字查询" />
			<button type="submit" style="border: none; background: none; outline: none;"><i class="fa fa-search" id="search"></i></button>
		</form>
		<a href="mc/downloadStudentMould" style="float:right; line-height: normal; ">下载学生上传模板</a>
		<table class="table table-hover">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>学院</td>
				<td>专业</td>
				<td>班级</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
			<tbody id="display" style="border-top:1px solid #ddd;">
				<tr th:each="student:${studentlist}" th:id="|tr${student.srollno}|">
					<td th:text="${student.srollno}"></td>
					<td th:text="${student.sname}"></td>
					<td th:text="${student.batch.major.acadamy.acdmname}"></td>
					<td th:text="|${student.batch.major.term.tyear}${student.batch.major.mjname}|"></td>
					<td th:text="${student.batch.bname}"></td>
					<td th:text="${student.sgender}"></td>
					<td>
						<a th:href="|mc/to_modifyStudent/${student.srollno}|">编辑</a> 
						<a th:href="|javascript:deleteStudent(${student.srollno});|">删除</a>
					</td>
				</tr>
			</tbody>
			
		</table>
		<!-- Button trigger modal -->
		<button type="button" style="float:left;" class="btn btn-success" data-toggle="modal" data-target="#addStudent">
		  添加新学生
		</button>
		<form enctype="multipart/form-data" method="post" action="mc/uploadStudent">
			<input type="submit" value="上传" class="btn btn-success" style="float:right" />
			<label for="file" style="float:right;display: inline-block;text-align: center; line-height:32px ;height: 32px;width:80px; ">＋选择文件</label>
			<input type="file" id="file" name="file" style="display: none" /> 
		</form>
		<div class="text-center">
			<nav>
				<ul class="pagination">
					<li><a class="tag" th:href="@{/mc/getAllStudent/(pageNo=1,keyword=${keyword})}">首页</a></li>
					<li><a class="tag" th:href="@{/mc/getAllStudent/(pageNo=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1,keyword=${keyword})}">上一页</a></li>
					<li th:each="page:${pageInfo.navigatepageNums}">
						<a class="tag" th:class="${pageInfo.pageNum}==${page}?'active'"
						   th:href="@{/mc/getAllStudent/(pageNo=${page},keyword=${keyword})}">[[${page}]]</a>
					</li>
					<li><a class="tag" th:href="@{/mc/getAllStudent/(pageNo=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages},keyword=${keyword})}">下一页</a></li>
					<li><a class="tag" th:href="@{/mc/getAllStudent/(pageNo=${pageInfo.pages},keyword=${keyword})}">尾页</a></li>
				</ul>
			</nav>
		</div>
		
		<!-- addStudent -->
		<div class="modal fade" id="addStudent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">添加新学生</h4>
		      </div>
		      <form action="mc/addStudent" method="post">
		      <div class="modal-body">
					<dl class="dl-horizontal">
					  <dt><label for="">学号：</label></dt>
					  <dd><input type="text" pattern="[0-9]{10}" required="required" name="srollno" title="10位数字的学号" placeholder="在此输入学号" class="form-control" style="width: 150px;"></dd>
					  <br>
					  <dt><label for="">姓名：</label></dt>
					  <dd><input type="text" required="required" name="sname" placeholder="在此输入姓名" class="form-control" style="width: 150px;"></dd>
					  <br>
					  <dt>所属学院：</dt>
					  <dd>
					  <select id="select1">
						<option>请选择学院</option>
						<option th:each="acadamy:${acadamylist}" th:value="${acadamy.acdmid}"  th:text="${acadamy.acdmname}"></option>
					  </select>
					  </dd>
					  <br>
					  <dt>所属专业：</dt>
					  <dd>
					  <select id="select2">
						<option>请选择专业</option>
					  </select>
					  </dd>
					  <br>
					  <dt>所属班级：</dt>
					  <dd>
					  <select id="select3" name="bid">
						<option>请选择班级</option>
					  </select>
					  </dd>
					  <br>
					  <dt>性别：</dt>
					  <dd>
					  <select name="sgender" >
						<option value="男">男</option>
						<option value="女 ">女</option>
					  </select>
					  </dd>
					  <br>
					  <dt>出生日期：</dt>
					  <dd><input type="date" name="birthday" placeholder="在此输入出生日期" class="form-control" style="width: 150px;"></dd>
					  <br>
					  <dt>密保问题：</dt>
					  <dd><input type="text" name="sque" class="form-control" style="width: 250px;"></dd>
					  <br>
					  <dt>密保答案：</dt>
					  <dd><input type="text" name="sans" class="form-control" style="width: 250px;"></dd>
					  <br>
					  <dt>入学年份：</dt>
					  <dd><input type="date" name="enrolment" class="form-control" style="width: 250px;"></dd>
					  <br>
					  <dt>籍贯：</dt>
					  <dd><input type="text" name="location" class="form-control" style="width: 150px;"> </dd>
					  <br>
					  <dt>政治面貌：</dt>
					  <dd><input type="text" name="political" class="form-control" style="width: 150px;"> </dd>
					  <br>
					  <input type="hidden" name="img" >
					</dl>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <input type="submit" class="btn btn-primary" value="添 加">
		      </div>
		      </form>
		    </div>
		  </div>
		</div>
	</div>
    <script type="text/javascript">  
	    function deleteStudent(id) {
	        $.ajax({
	            url: 'mc/deleteStudent',
	            type: 'POST',
	            data: {srollno: id}, 
	            success: function () {
	            	  $("#tr" + id).remove(); 
	            },
	            error: function (req, status, error) {
	                alert("Ajax请求失败，错误：" + error);
	            }
	        });
	    }
	    $(document).ready(function(){
	    	
	    	$("#search").click(function(){
	    		
	    	/* 	$.ajax({
	    			url: "mc/getAllStudent",
	    			type: "GET",
	    			data: {keyword: $("#keyword").val()},
	    			success:function(){
	    				 $("#display").empty();
	    				 $.each(data,function(index,value){
	    					var str1 = "<tr id=tr"+ value.srollno +">" + 
	    					"<td>" + value.srollno+ "</td>" +
	    					"<td>" + value.sname + "</td>" +
	    					"<td>" + value.batch.major.acadamy.acdmname + "</td>" +
	    					"<td>" + value.batch.major.term.tyear + value.batch.major.mjname + "</td>" +
	    					"<td>" + value.batch.bname + "</td>" +
	    					"<td>" + value.sgender + "</td>" +
	    					"<td><a href=\"mc/to_modifyStudent/"+ value.srollno +"\">编辑 </a>" + 
	    					"<a href=\"javascript:deleteStudent("+ value.srollno +")\"> 删除</a>" +
	    					"</td>" +
	    					"</tr>";
	    					$("#display").append(str1);
	    				}); 
	    				
	    			},
	    			error: function(){
	    				
	    			}
	    		});
 */	    	});
	    	
	     	$("#select1").change(function(){
   				$("#lpid").removeAttr("value");
   		   		var str2 = "<option>请选择专业</option>";
				var str3 = "<option>请选择班级</option>";
				$.ajax({
					url: 'mc/getMajorByacdmid',
					type: 'GET',
					data: {acdmid: $("#select1").val()},
					success: function(data){
						var str1 = "";
						$("#select2").empty();
						$("#select3").empty();
					 	$("#select2").append(str2); 
					 	$("#select3").append(str3); 
						$.each(data,function(index,value){
							str1 = "<option value='"+ value.mjid +"'>" +  value.term.tyear + value.mjname + "</option>";
							$("#select2").append(str1);
						});
					},
					error: function(req,status,error){
						$("#select2").empty();
						$("#select2").append(str2);
						$("#select3").empty();
						$("#select3").append(str3);
					}
				});
			});
			$("#select2").change(function(){
				$("#lpid").removeAttr("value");
				var str3 = "<option>请选择班级</option>";
				$.ajax({
					url: 'mc/getBatchBymjid',
					type: 'GET',
					data: {mjid: $("#select2").val()},
					success: function(data){
						var str1 = "";
						$("#select3").empty();
					 	$("#select3").append(str3); 
						$.each(data,function(index,value){
							str1 = "<option value='"+ value.bid +"'>" +  value.bname + "</option>";
							$("#select3").append(str1);
						});
					},
					error: function(req,status,error){
						$("#select3").empty();
						$("#select3").append(str3);
					}
				});
			});
	     });
            
    </script>


</body>
</html>